<template>
  <div class="app">
    <h1>你好啊！Vue</h1>
    <button @click="showLog">输出日志</button> <br/> <hr/>
    <!--  使用组件 -->
    <!-- <ThreadDemo />
    <Person /> 
    <setupAndOptionsAPI/>
    <Vue3YuFaTang23/>
    <Vue响应式对象Vue/>
    <Vue数据绑定计算属性/>
    <UseWatchBaseType />
     <UseWatchRef对象类型Vue />
     <UseRef_Attribute ref="refAttr" />
     <UseTypeScritp />
    <UseProps :list="perList"/>
     <UseLifeCycle v-if="isShow"/>
  -->
    <UseHooks/>

  </div>
</template>

<script lang="ts" setup name="App">
import { ref } from "vue";
import Person from "./components/Person.vue"; //引用组件
import ThreadDemo from "./components/ThreadDemo.vue";
import UseWatchBaseType from "./components/UseWatch-ref基本类型.vue";
import UseWatchRef对象类型Vue from "./components/UseWatch-ref对象类型.vue";
import Vue3YuFaTang23 from "./components/Vue3YuFaTang.vue";
import setupAndOptionsAPI from "./components/setupAndOptionsAPI.vue";
import Vue响应式对象Vue from "./components/响应式对象.vue";
import Vue数据绑定计算属性 from "./components/数据绑定-计算属性.vue";
import UseWatchReactive对象类型Vue from "./components/UseWatch-reactive对象类型.vue";
import UseWatchEffect from "./components/UseWatchEffect.vue";
import UseRef_Attribute from "./components/UseRef_Attribute.vue";
import UseTypeScritp from "./components/UseTypeScritp.vue";
import UseProps from "./components/UseProps.vue";
import UseLifeCycle from "./components/UseLifeCycle.vue";
import UseHooks from "./components/UseHooks.vue";
import {reactive} from 'vue'
import {type personsList} from '@/types'

let perList=reactive<personsList>([
  {id:'01',name:'张三',age:18},
  {id:'02',name:'李四',age:28},
  {id:'03',name:'王五',age:38}
])
let refAttr=ref();
let isShow=ref(true);

function showLog(){
  //这里就可以拿到子的Vue中对外提供的变量
  console.log(refAttr.value.name)
  console.log(refAttr.value.age)

}


</script>

<style>
.app {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>
